<template>
  <div class="rank">
    <div class="rangking_img">
      <img :src="cover || officialListDetailItem.coverImgUrl" alt="" />
    </div>
    <div class="ranking_table">
      <table>
        <tr
          class="listRows"
          v-for="(item, index) in (officialListDetailItem.songs &&
            officialListDetailItem.songs.slice(0, 10)) ||
          (officialListDetailItem.tracks &&
            officialListDetailItem.tracks.slice(0, 5))"
          :key="item.id"
          @click="clickRow(item.id)"
        >
          <td class="index">{{ index + 1 }}</td>
          <td class="musicName">{{ item.name }}</td>
          <td class="singer">{{ item.ar[0].name }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListTable",
  props: {
    officialListDetailItem: {
      type: Object,
      default() {
        return [];
      },
    },
    // 传来的封面
    cover: {
      type: String,
      default() {
        return "";
      },
    },
  },
  methods: {
    // 点击歌曲回调
    clickRow(id) {
      this.$emit("clickPlay", id);
    },
  },
};
</script>

<style lang="less" scoped>
.rank {
  display: flex;
  margin-bottom: 80px;
}
.rangking_img {
  width: 200px;
  height: 200px;
  border-radius: 15px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
}
.ranking_table {
  margin-left: 20px;
  width: 80%;
}
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
}

.listRows {
  height: 40px;
  font-size: 14px;
  color: rgb(153, 153, 153);
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.listRows:nth-child(odd) {
  background-color: #f6f6f6;
}
.listRows:hover {
  background-color: #f4f4f4;
}

.listRows td {
  transform: scale(0.9);
}
.index {
  text-align: center;
  line-height: 28px;
  width: 30px;
}

.listRows .musicName {
  color: rgb(31, 31, 31);
  transform: translate(-5%, -5%) scale(0.9);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 80%;
}

.singer {
  text-align: right;
  position: absolute;
  right: 10px;
}
</style>